<template>
  <div id="marquee">
    <div class="auto1200">
      <div class="img">
        <img src="../../assets/image/icon.png" alt="">
      </div>
      <marquee behavior="scroll">
        {{currentTitle}}
      </marquee>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'marquees',
    data() {
      return {
        currentTitle: ''
      }
    },
    props: ['title'],
    mounted() {
      this.currentTitle = this.title
    }
  }
</script>

<style lang="less">
  #marquee {
    width: 100%;
    height: 60px;
    line-height: 60px;
    opacity: 0.89;
    background: #7820FD;
    color: #fff;
    .img {
      width: 30px;
      height: 60px;
      position: absolute;
      left: 0;
      top: 0;
      background: #7820FD;
      z-index: 99;
    }
    img {
      position: absolute;
      width: 30px;
      top: 15px;
      left: -1px;
    }
    marquee {
      display: block;
      position: relative;
      padding-left: 40px;
    }
  }
</style>
